<template>
  <div class="castingManagement">
    <div class="categoryManagement-table-header">
      <div>
        <div class="input">
          <el-input v-model="page.denomName" clearable placeholder="请输入类别名称"/>
        </div>
        <el-button type="primary" @click="theQuery">查询</el-button>
        <el-button type="primary-btn" @click="reset">重置</el-button>
      </div>
      <!-- <el-button type="primary" @click="newCategory">新建品类</el-button> -->
    </div>

    <el-table :data="dataList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="blockchainName" label="区块链" width="200"/>
      <el-table-column prop="denomName" label="类别名称" width="300"/>
      <el-table-column prop="denomId" label="类别ID" width="420"/>
      <el-table-column prop="count" label="商品数量" width="200"/>
      <el-table-column prop="createTime" label="创建时间"/>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="page.currentPage"
                   :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <!-- 新建品类弹窗 -->
    <Category v-if="categoryShow" ref="addOrUpdate" @refreshDataList="getPage()"/>
  </div>
</template>

<script>
  import Category from './category.vue'

  export default {
    components: {
      Category,
    },
    data () {
      return {
        dataList: [],
        categoryShow: false,

        //返回的参数
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
          denomName: '',
        },
      }
    },
    mounted () {
      this.getDataList(this.page)
    },
    methods: {
      getDataList (page) {
        this.pageLoading = true
        this.$http({
          url: this.$http.adornUrl(
            `/admin/nftdenom/getpageDenom?pageSize=${this.page.pageSize}&pageNum=${this.page.currentPage}&denomName=${this.page.denomName}`
          ),
          method: 'get',
        }).then(({data}) => {
          this.dataList = data.list
          this.page.total = data.total
          this.dataListLoading = false
        })
      },

      //查询
      theQuery () {
        this.page.currentPage = 1
        this.$http({
          url: this.$http.adornUrl(
            `/admin/nftdenom/getpageDenom?pageSize=${this.page.pageSize}&pageNum=${this.page.currentPage}&denomName=${this.page.denomName}`
          ),
          method: 'get',
        }).then(({data}) => {
          this.dataList = data.list
          this.page.total = data.total
          this.dataListLoading = false
        })
      },
      // 重置
      reset () {
        this.page.denomName = ''

        this.getDataList(this.page) //重置表单加载初始列表
      },
      //新建品类
      newCategory () {
        this.categoryShow = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },

      //分页按钮
      handleSizeChange (val) {
        this.page.pageSize = val
        // this.pageQuery.pageSize = val
        this.getDataList(this.page)
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        // this.pageQuery.pageSize = val
        this.getDataList(this.page)
      },
    },
  }
</script>

<style scoped>
  .categoryManagement {
    width: 95% !important;
    margin: 30px auto 0;
  }

  .categoryManagement-table-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px 0;
  }

  .categoryManagement-table-header div {
    display: flex;
    flex-direction: row;
  }

  .categoryManagement-table-header div .input {
    margin-right: 15px !important;
  }

  .categoryManagement >>> .has-gutter tr th .cell {
    text-align: center;
  }

  .categoryManagement >>> .el-table__row td .cell {
    text-align: center;
  }
</style>
